<template>
  <header class="category-header">
    <i class="iconfont iconfont-31fanhui1" @click="gohome"></i>
    <div class="header-search">
      <i class="iconfont icon-fangdajing"></i>
      <span class="search-title">家电返场同价11.11</span>
    </div>
    <i class="iconfont icon-gengduo"></i>
  </header>
</template>

<script>
export default {
  methods: {
    gohome() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  padding: 0 21px;

  .iconfont {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 100%;
    font-size: 25px;

    &::before {
      width: 28px;
      height: 28px;
    }
  }

  .header-search {
    display: flex;
    width: 80%;
    height: 43px;
    color: #232326;
    background: #f7f7f7;
    border-radius: 42px;

    .icon-fangdajing {
      margin: 0 10px 0 20px;
    }

    .search-title {
      display: flex;
      align-items: center;
      font-size: 17px;
    }
  }
}
</style>